<template>
  <view class="goods_card">
    <view class="flex" style="margin-bottom: 20rpx">
      <view><img class="goods_img" :src="goods.image" alt=""></view>
      <view class="name_box">
        <view class="goods_name">{{ goods.name }}</view>
        <view class="goods_code">{{ goods.code }}</view>
      </view>
    </view>
    <goods-model  :goodsModels="models"></goods-model>
  </view>
</template>

<script>
import goodsModel from '@/components/goodsModel.vue'
export default {
  name: 'goods-card',
  components: { goodsModel },
  props: {
    goods: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data(){
    return {
      models:[]
    }
  },
  created() {
    console.log(this.goods)
    this.models = [
      {
        label:'计量单位',
        value:this.goods.mainUnitName
      },
      {
        label:'品牌',
        value:this.goods.goodsBrandName
      },
      {
        label:'分类',
        value:this.goods.goodsTypeName
      }
    ]
  }
}
</script>
<style scoped lang="scss">
.goods_img {
  width: 120rpx;
  height: 120rpx;
}

.goods_name {
  color: rgb(51, 51, 51)
}
.name_box{
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-left: 30rpx;
  .goods_name {
    color: rgb(51, 51, 51);
    font-size: 28rpx;
    flex:1;
    display: flex;
    align-items: center;
    font-weight: bold;
  }
  .goods_code{
    color: rgb(153, 153, 153);
    flex:1;
    display: flex;
    align-items: center;
  }
}
</style>